<template>
  <div class="board-column" :class="{'used': number == 4 || number == 5|| number == 7}">
    <div class="board-column-header">{{ headerText }}</div>
    <draggable :disabled="disabled" :list="list" v-bind="$attrs" class="board-column-content" :move="onMove">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="board-item"
        :style="{'background-color': item.bgcolor || ''}"
      >
        <el-image :src="item.icon">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <section class="item-txt">
          <section>{{ item.name }}</section>
          <section v-if="item.text">（{{ item.text }}）</section>
        </section>
        <el-switch v-if="number !== 7" v-model="item.show" active-text="显示" inactive-text="不显示" />
        <el-switch v-else v-model="item.login" active-text="需要登录" inactive-text="不需要登录" />
        <el-button type="text" icon="el-icon-edit" @click="handleEdit(item)" />
        <el-button v-if="showDel" type="text" icon="el-icon-delete" @click="handleDelete(item,index)" />
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import ghhn from './../images/icon-ghhn.png'
import cxxc from './../images/icon-cxxc.png'
import zgfc from './../images/icon-zgfc.png'
import ghry from './../images/icon-ghry.png'
import hyzs from './../images/icon-hyzs.png'
import zgtp from './../images/icon-zgtp.png'
import fczj from './../images/icon-fczj.png'
import flfw from './../images/icon-flfw.png'
import xlyz from './../images/icon-xlyz.png'
import hybf from './../images/icon-hybf.png'
import zdh from './../images/icon-zdh.png'
import wjtc from './../images/icon-wjtc.png'

import servicewdfl from './../images/service/wdfl.png'
import servicehdzx from './../images/service/hdzx.png'
import servicehfsj from './../images/service/hfsj.png'
import serviceghzj from './../images/service/ghzj.png'
import serviceghxw from './../images/service/ghxw.png'
import servicegg from './../images/service/gg.png'
import servicefwrx from './../images/service/fwrx.png'
import servicegaxd from './../images/service/gaxd.png'
import servicezxx from './../images/service/zxx.png'
import serviceghjz from './../images/service/ghjz.png'
import servicexfng from './../images/service/xfng.png'
import servicebmfw from './../images/service/bmfw.png'
import servicejnzq from './../images/service/jnzq.png'
import servicecglb from './../images/service/cglb.png'
import servicezxxx from './../images/service/zxxx.png'
import servicezxks from './../images/service/zxks.png'
import servicezxdt from './../images/service/zxdt.png'
import servicephb from './../images/service/phb.png'
import servicezjhd from './../images/service/zjhd.png'
import servicetphd from './../images/service/tphd.png'
import servicedcwj from './../images/service/dcwj.png'
import serviceghhn from './../images/service/ghhn.png'
import servicezcwj from './../images/service/zcwj.png'
import servicecylj from './../images/service/cylj.png'
import servicetxl from './../images/service/txl.png'
import servicebgzl from './../images/service/bgzl.png'
import servicezzjg from './../images/service/zzjg.png'
import servicehygl from './../images/service/hygl.png'
import serviceghry from './../images/service/ghry.png'
import servicedsj from './../images/service/dsj.png'
import servicecsyy from './../images/service/csyy.png'
import servicezgyy from './../images/service/zgyy.png'
import servicezgfc from './../images/service/zgfc.png'
import servicecxgzs from './../images/service/cxgzs.png'
import servicezgcx from './../images/service/zgcx.png'
import servicezdh from './../images/service/zdh.png'
import servicehyzs from './../images/service/hyzs.png'
import servicejfrw from './../images/service/jfrw.png'
import serviceflsc from './../images/service/flsc.png'
import servicexlyz from './../images/service/xlyz.png'
import servicemmxw from './../images/service/mmxw.png'
import servicebfjz from './../images/service/bfjz.png'
import servicehyww from './../images/service/hyww.png'
import serviceflzx from './../images/service/flzx.png'
import serviceflfw from './../images/service/flfw.png'
import servicezgsw from './../images/service/zgsw.png'
import servicezgxqxz from './../images/service/zgxqxz.png'
// 中建二局新增
import zgfls from './../images/zgfls.png'
import gwlb from './../images/gwlb.png'
import zbhd from './../images/zbhd.png'
import gjsg from './../images/gjsg.png'
import ghhd from './../images/ghhd.png'
import xsyzg from './../images/xsyzg.png'
import wndt from './../images/wndt.png'
import kcxx from './../images/kcxx.png'
// 中建二局新增

import servicehdbm from './../images/service/hdbm.png'
import newgdh from './../images/news/newgdh.png'
import newzgfc from './../images/news/newzgfc.png'
import newghxw from './../images/news/newghxw.png'
import newgg from './../images/news/newgg.png'
import newxlyz from './../images/news/newxlyz.png'

import newhwzs from './../images/news/newhwzs.png'
import newbfjz from './../images/news/newbfjz.png'
import newflfw from './../images/news/newflfw.png'
import newzgjk from './../images/news/newzgjk.png'
import newzgsw from './../images/news/newzgsw.png'
import newzzjg from './../images/news/newzzjg.png'
import newghry from './../images/news/newghry.png'
import newdsj from './../images/news/newdsj.png'
import newjnzq from './../images/news/newjnzq.png'
import newcglb from './../images/news/newcglb.png'
import newzxxx from './../images/news/newzxxx.png'
import newzxks from './../images/news/newzxks.png'
import newzxdt from './../images/news/newzxdt.png'
import newphb from './../images/news/newphb.png'
import newbmhd from './../images/news/newbmhd.png'
import newtphd from './../images/news/newtphd.png'
import newdcwj from './../images/news/newdcwj.png'
import newzgjy from './../images/news/newzgjy.png'
import newzjhd from './../images/news/newzjhd.png'
import newxfng from './../images/news/newxfng.png'
import newmmxw from './../images/news/newmmxw.png'
import newaxyz from './../images/news/newaxyz.png'
import newwdfl from './../images/news/newwdfl.png'
import newjfrw from './../images/news/newjfrw.png'
import newsc from './../images/news/newsc.png'
import newfwrx from './../images/news/newfwrx.png'
import newcylj from './../images/news/newcylj.png'
import newcgyy from './../images/news/newcgyy.png'
// import newylhz from './../images/news/newylhz.png'
// 新加的
import servicezgfls from './../images/service/zgfls.png'
import servicegwlb from './../images/service/gwlb.png'
import servicezbhd from './../images/service/zbhd.png'
import servicegjsg from './../images/service/gjsg.png'
import serviceghhd from './../images/service/ghhd.png'
import servicexsyzg from './../images/service/xsyzg.png'
import servicewndt from './../images/service/wndt.png'
import servicekcxx from './../images/service/kcxx.png'
import newymxd from './../images/news/newymxd.png'
import newzjbl from './../images/news/newzjbl.png'
import newzyfw from './../images/news/newzyfw.png'

import menusaqj from './../images/menus/aqj.png'
import menusdsw from './../images/menus/dsw.png'
import menusdtcg from './../images/menus/dtcg.png'
import menusflh from './../images/menus/flh.png'
import menusjnk from './../images/menus/jnk.png'
import menusshq from './../images/menus/shq.png'
import menusugb from './../images/menus/ugb.png'
import menuszb from './../images/menus/zb.png'
import menusjnds from '../images/menus/jnds.png'
export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  props: {
    headerText: {
      type: String,
      default: 'Header'
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    group: {
      type: String,
      default: ''
    },
    number: {
      type: Number,
      default: 1
    },
    list: {
      type: Array,
      default() {
        return []
      },
      validator: (value) => {
        return value.length <= 10
      }
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    getIcon(icon) {
      let s = ''
      switch (icon) {
        case 'ghhn':
          s = ghhn
          break
        case 'cxxc':
          s = cxxc
          break
        case 'zgfc':
          s = zgfc
          break
        case 'ghry':
          s = ghry
          break
        case 'hyzs':
          s = hyzs
          break
        case 'zgtp':
          s = zgtp
          break
        case 'fczj':
          s = fczj
          break
        case 'flfw':
          s = flfw
          break
        case 'xlyz':
          s = xlyz
          break
        case 'hybf':
          s = hybf
          break
        case 'zdh':
          s = zdh
          break
        case 'wjtc':
          s = wjtc
          break

        case 'servicewdfl':
          s = servicewdfl
          break
        case 'servicehdzx':
          s = servicehdzx
          break
        case 'servicehfsj':
          s = servicehfsj
          break
        case 'serviceghzj':
          s = serviceghzj
          break
        case 'serviceghxw':
          s = serviceghxw
          break
        case 'servicegg':
          s = servicegg
          break
        case 'servicefwrx':
          s = servicefwrx
          break
        case 'servicegaxd':
          s = servicegaxd
          break
        case 'servicezxx':
          s = servicezxx
          break
        case 'serviceghjz':
          s = serviceghjz
          break
        case 'servicexfng':
          s = servicexfng
          break
        case 'servicebmfw':
          s = servicebmfw
          break
        case 'servicejnzq':
          s = servicejnzq
          break
        case 'servicecglb':
          s = servicecglb
          break
        case 'servicezxxx':
          s = servicezxxx
          break
        case 'servicezxks':
          s = servicezxks
          break
        case 'servicezxdt':
          s = servicezxdt
          break
        case 'servicephb':
          s = servicephb
          break
        case 'servicezjhd':
          s = servicezjhd
          break
        case 'servicetphd':
          s = servicetphd
          break
        case 'servicedcwj':
          s = servicedcwj
          break
        case 'serviceghhn':
          s = serviceghhn
          break
        case 'servicezcwj':
          s = servicezcwj
          break
        case 'servicecylj':
          s = servicecylj
          break
        case 'servicetxl':
          s = servicetxl
          break
        case 'servicebgzl':
          s = servicebgzl
          break
        case 'servicezzjg':
          s = servicezzjg
          break
        case 'servicehygl':
          s = servicehygl
          break
        case 'serviceghry':
          s = serviceghry
          break
        case 'servicedsj':
          s = servicedsj
          break
        case 'servicecsyy':
          s = servicecsyy
          break
        case 'servicezgyy':
          s = servicezgyy
          break
        case 'servicezgfc':
          s = servicezgfc
          break
        case 'servicecxgzs':
          s = servicecxgzs
          break
        case 'servicezgcx':
          s = servicezgcx
          break
        case 'servicezdh':
          s = servicezdh
          break
        case 'servicehyzs':
          s = servicehyzs
          break
        case 'servicejfrw':
          s = servicejfrw
          break
        case 'serviceflsc':
          s = serviceflsc
          break
        case 'servicexlyz':
          s = servicexlyz
          break
        case 'servicemmxw':
          s = servicemmxw
          break
        case 'servicebfjz':
          s = servicebfjz
          break
        case 'servicehyww':
          s = servicehyww
          break
        case 'serviceflzx':
          s = serviceflzx
          break
        case 'serviceflfw':
          s = serviceflfw
          break
        case 'servicezgsw':
          s = servicezgsw
          break
        case 'newgdh':
          s = newgdh
          break
        case 'newzgfc':
          s = newzgfc
          break
        case 'newghxw':
          s = newghxw
          break
        case 'newgg':
          s = newgg
          break
        case 'newxlyz':
          s = newxlyz
          break

        case 'newhwzs':
          s = newhwzs
          break
        case 'newbfjz':
          s = newbfjz
          break
        case 'newflfw':
          s = newflfw
          break
        case 'newzgjk':
          s = newzgjk
          break
        case 'newzgsw':
          s = newzgsw
          break
        case 'newzzjg':
          s = newzzjg
          break
        case 'newghry':
          s = newghry
          break
        case 'newdsj':
          s = newdsj
          break
        case 'newjnzq':
          s = newjnzq
          break
        case 'newcglb':
          s = newcglb
          break
        case 'newzxxx':
          s = newzxxx
          break
        case 'newzxks':
          s = newzxks
          break
        case 'newzxdt':
          s = newzxdt
          break
        case 'newphb':
          s = newphb
          break
        case 'newbmhd':
          s = newbmhd
          break
        case 'newtphd':
          s = newtphd
          break
        case 'newdcwj':
          s = newdcwj
          break
        case 'newzgjy':
          s = newzgjy
          break
        case 'newzjhd':
          s = newzjhd
          break
        case 'newxfng':
          s = newxfng
          break
        case 'newmmxw':
          s = newmmxw
          break
        case 'newaxyz':
          s = newaxyz
          break
        case 'newwdfl':
          s = newwdfl
          break
        case 'newjfrw':
          s = newjfrw
          break
        case 'newsc':
          s = newsc
          break
        case 'newfwrx':
          s = newfwrx
          break
        case 'newcylj':
          s = newcylj
          break
        case 'newcgyy':
          s = newcgyy
          break
          // case 'newylhz':
          // 	s = newylhz
          // 	break
        case 'newymxd':
          s = newymxd
          break
        case 'newzjbl':
          s = newzjbl
          break
        case 'newzyfw':
          s = newzyfw
          break
        case 'servicezgxqxz':
          s = servicezgxqxz
          break
        case 'zgfls':
          s = zgfls
          break
        case 'gwlb':
          s = gwlb
          break
        case 'zbhd':
          s = zbhd
          break
        case 'gjsg':
          s = gjsg
          break
        case 'ghhd':
          s = ghhd
          break
        case 'xsyzg':
          s = xsyzg
          break
        case 'wndt':
          s = wndt
          break
        case 'kcxx':
          s = kcxx
          break
        case 'servicezgfls':
          s = servicezgfls
          break
        case 'servicegwlb':
          s = servicegwlb
          break
        case 'servicezbhd':
          s = servicezbhd
          break
        case 'servicegjsg':
          s = servicegjsg
          break
        case 'serviceghhd':
          s = serviceghhd
          break
        case 'servicexsyzg':
          s = servicexsyzg
          break
        case 'servicewndt':
          s = servicewndt
          break
        case 'servicekcxx':
          s = servicekcxx
          break
        case 'servicehdbm':
          s = servicehdbm
          break
        case 'menusaqj':
          s = menusaqj
          break
        case 'menusjnds':
          s = menusjnds
          break
        case 'menusdsw':
          s = menusdsw
          break
        case 'menusdtcg':
          s = menusdtcg
          break
        case 'menusflh':
          s = menusflh
          break
        case 'menusjnk':
          s = menusjnk
          break
        case 'menusshq':
          s = menusshq
          break
        case 'menusugb':
          s = menusugb
          break
        case 'menuszb':
          s = menuszb
          break
        default:
          break
      }
      return s
    },
    setData(dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    onMove(e, originalEvent) {
      const list = e.relatedContext.list
      if (list.length >= 10) {
        return false
      } else {
        return true
      }
    },
    handleEdit(row) {
      this.$emit('edit', {
        n: this.number,
        r: row,
        t: this.group
      })
    },
    handleDelete(row, index) {
      this.$emit('delete', {
        n: this.number,
        r: row,
        t: this.group,
        i: index
      })
    }

  }
}
</script>
<style lang="scss">
	.board-column {
		min-width: 350px;
		min-height: 100px;
		height: auto;
		overflow: hidden;
		background: #f0f0f0;
		border-radius: 3px;

		&.used {
			min-width: 500px;
		}

		.board-column-header {
			height: 50px;
			line-height: 50px;
			overflow: hidden;
			padding: 0 20px;
			text-align: center;
			background: #333;
			color: #fff;
			border-radius: 3px 3px 0 0;
		}

		.board-column-content {
			height: auto;
			overflow: hidden;
			border: 10px solid transparent;
			min-height: 60px;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			align-items: center;

			.board-item {
				cursor: pointer;
				width: 100%;
				height: 64px;
				margin: 5px 0;
				background-color: #fff;
				text-align: left;
				line-height: 54px;
				padding: 5px 10px;
				box-sizing: border-box;
				box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
				display: flex;
				align-items: center;
				justify-content: space-around;

				.el-image {
					width: 50px;
					height: 50px;
					border-radius: 50%;

					.image-slot {
						background: #f5f7fa;
					}
				}

				.item-txt {
					display: flex;
					align-items: center;
					padding-left: 10px;
				}
			}
		}
	}
</style>
